<LayoutTableSmall>
    <!-- 其他 -->
    <template slot="other"></template>
    <!-- 搜索 -->
    <template slot="search">
        <el-form :inline="true" label-position="left" label-width="80px" :model="mixinTable_tableSearchData"
            @submit.native.prevent class="demo-form-inline">

            <el-form-item>
                <!-- 上架状态  -->
                <el-form-item label="">
                    <el-select v-model="mixinTable_tableSearchData.publishStatus" @change="mixinTable_searchData"
                        clearable style="width:100px" placeholder="上架状态">
                        <el-option label="上架" value="0"></el-option>
                        <el-option label="下架" value="1"></el-option>
                        <el-option label="售罄" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-input clearable v-model="mixinTable_tableSearchData.name" placeholder="查询支持商品名称、编码"
                    @change="mixinTable_searchData" style="width:260px">
                    <el-button slot="append" icon="el-icon-search" @click="mixinTable_searchData()">
                    </el-button>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-popover width="430" trigger="click" @show="showSearchSeniorBox">
                    <div class="optionSearch" v-loading="searchSeniorLoading<5">
                        <el-form label-position="left" label-width="84px" :model="mixinTable_tableSearchSenior">
                            <div class="box">
                                <el-form-item label="名称">
                                    <el-input clearable v-model="mixinTable_tableSearchData.name" placeholder="请输入品牌名称"
                                        style="width:100%">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="分组">
                                    <el-cascader placeholder="试试搜索类目名称" style="width:100%" v-model="groupsIds" clearable
                                        :options="groupsOptions">
                                    </el-cascader>
                                </el-form-item>
                                <el-form-item label="商品标签">
                                    <el-select placeholder="请选择..."
                                        v-model="mixinTable_tableSearchSenior.labelIdLst.value" multiple
                                        style="width:100%">
                                        <el-option v-for="item in labelOptions" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="商品品牌">
                                    <el-select placeholder="请选择..."
                                        v-model="mixinTable_tableSearchSenior.brandIdLst.value" multiple
                                        style="width:100%">
                                        <el-option v-for="item in brandOptions" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="商品属性">
                                    <el-select placeholder="请选择..."
                                        v-model="mixinTable_tableSearchSenior.attributeValueIdLst.value" multiple
                                        style="width:100%">
                                        <el-option v-for="item in arrtOptions" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="商品服务">
                                    <el-select placeholder="请选择..."
                                        v-model="mixinTable_tableSearchSenior.serveValueIdLst.value" multiple
                                        style="width:100%">
                                        <el-option v-for="item in serveOptions" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="价格区间">
                                    <div class="item">
                                        <div class="l">
                                            <el-input-number style="width:100%"
                                                v-model="mixinTable_tableSearchSenior.minPrice.value"
                                                controls-position="right" :min="0"
                                                :max="mixinTable_tableSearchSenior.maxPrice.value">
                                            </el-input-number>
                                        </div>
                                        <div class="c">至</div>
                                        <div class="r">
                                            <el-input-number style="width:100%"
                                                v-model="mixinTable_tableSearchSenior.maxPrice.value"
                                                controls-position="right"
                                                :min="mixinTable_tableSearchSenior.minPrice.value" :max="1000000">
                                            </el-input-number>
                                        </div>
                                    </div>

                                </el-form-item>
                                <el-form-item label="上下架日期">
                                    <div class="item">
                                        <div class="l">
                                            <el-date-picker style="width:100%"
                                                v-model="mixinTable_tableSearchSenior.putAwayTimeStartStr.value"
                                                type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="起始日期">
                                            </el-date-picker>
                                        </div>
                                        <div class="c">至</div>
                                        <div class="r">
                                            <el-date-picker style="width:100%"
                                                v-model="mixinTable_tableSearchSenior.putAwayTimeEndStr.value"
                                                type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="截止日期">
                                            </el-date-picker>
                                        </div>
                                    </div>
                                </el-form-item>

                            </div>
                            <div class="footer">

                                <el-button @click="mixinTable_searchSeniorReset()">
                                    清空搜索
                                </el-button>
                                <el-button type="primary" @click="mixinTable_searchData()">高级搜索</el-button>
                            </div>

                        </el-form>
                    </div>
                    <el-button slot="reference">高级筛选</el-button>
                </el-popover>
            </el-form-item>
        </el-form>
    </template>
    <!-- 功能 -->
    <template slot="function">
        <el-button type="primary" @click="editBoxOpen({type:'add'})">添加商品</el-button>
        <el-button @click="report()">导出报表</el-button>
        <!-- <el-popover width="430" trigger="click" @show="showSearchSeniorBox" style="margin-left:10px;">
            <div class="optionSearch" v-loading="searchSeniorLoading<5">
                <el-form label-position="left" label-width="84px" :model="exportData">
                    <div class="box">
                        <el-form-item label="名称">
                            <el-input clearable v-model="exportData.name.value" placeholder="请输入品牌名称"
                                style="width:100%">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="上架状态">
                            <el-select v-model="exportData.publishStatus.value">
                                <el-option label="全部" :value="null"></el-option>
                                <el-option label="上架" :value="0"></el-option>
                                <el-option label="下架" :value="1"></el-option>
                                <el-option label="售罄" :value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="分组">
                            <el-cascader placeholder="试试搜索类目名称" style="width:100%" v-model="exportGroupsIds" clearable
                                :options="groupsOptions">
                            </el-cascader>
                        </el-form-item>
                        <el-form-item label="商品标签">
                            <el-select placeholder="请选择..." v-model="exportData.labelIdLst.value" multiple
                                style="width:100%">
                                <el-option v-for="item in labelOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="商品品牌">
                            <el-select placeholder="请选择..." v-model="exportData.brandIdLst.value" multiple
                                style="width:100%">
                                <el-option v-for="item in brandOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="商品属性">
                            <el-select placeholder="请选择..." v-model="exportData.attributeValueIdLst.value" multiple
                                style="width:100%">
                                <el-option v-for="item in arrtOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="商品服务">
                            <el-select placeholder="请选择..." v-model="exportData.serveValueIdLst.value" multiple
                                style="width:100%">
                                <el-option v-for="item in serveOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="价格区间">
                            <div class="item">
                                <div class="l">
                                    <el-input-number style="width:100%" v-model="exportData.minPrice.value"
                                        controls-position="right" :min="0" :max="exportData.maxPrice.value">
                                    </el-input-number>
                                </div>
                                <div class="c">至</div>
                                <div class="r">
                                    <el-input-number style="width:100%" v-model="exportData.maxPrice.value"
                                        controls-position="right" :min="exportData.minPrice.value" :max="1000000">
                                    </el-input-number>
                                </div>
                            </div>

                        </el-form-item>
                        <el-form-item label="上下架日期">
                            <div class="item">
                                <div class="l">
                                    <el-date-picker style="width:100%" v-model="exportData.putAwayTimeStartStr.value"
                                        type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="起始日期">
                                    </el-date-picker>
                                </div>
                                <div class="c">至</div>
                                <div class="r">
                                    <el-date-picker style="width:100%" v-model="exportData.putAwayTimeEndStr.value"
                                        type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="截止日期">
                                    </el-date-picker>
                                </div>
                            </div>
                        </el-form-item>

                    </div>
                    <div class="footer">

                        <el-button @click="clearExport">
                            清空条件
                        </el-button>
                        <el-button type="primary" @click="exportTable">导出</el-button>
                    </div>

                </el-form>
            </div>
            <el-button slot="reference">导出报表</el-button>
        </el-popover> -->


    </template>
    <!-- 表格 -->
    <template slot="table">

        <el-table v-loading="mixinTable_loading" :data="mixinTable_tableData" border style="width: 100%;"
            :ref="mixinPage_vueName+'TableSmall'" default-expand-all height="100%" row-key="id"
            @selection-change="mixinTable_handleSelectionChangeTableSmall">
            <el-table-column type="selection" width="50" align="center"></el-table-column>
            <el-table-column type="index" width="50" :index="mixinTable_indexMethod" align="center" label="#">
            </el-table-column>
            <el-table-column prop="albumUrl" label="封面图" width="70px" align="center">
                <template slot-scope="scope">
                    <div class="albumUrl">
                        <imageBox :src="scope.row.albumUrl" ></imageBox>
                    </div>
                    <!-- <img class="albumUrl" :src="scope.row.albumUrl" /> -->
                </template>
            </el-table-column>
            <el-table-column prop="name" label="商品名称" width="190"></el-table-column>
            <el-table-column prop="salePrice" label="价格">
                <template slot-scope="scope">
                    {{$vFN.Tools.toMoneyCount(scope.row.salePrice)}}
                </template>
            </el-table-column>
            <el-table-column prop="stock" label="总库存"></el-table-column>
            <el-table-column prop="orderSales" label="实际销量"></el-table-column>
            <el-table-column prop="createdTimeStr" label="创建时间">
                <template slot-scope="scope">
                    {{$vFN.Utils.timestampFormat($vFN.Utils.stringToTimestamp(scope.row.createdTimeStr))}}
                </template>
            </el-table-column>

            <el-table-column prop="publishStatus" align="center" label="上架状态">
                <template slot-scope="scope">
                    <StateIcon :type="scope.row.publishStatus==1?'error':'success'"></StateIcon>
                </template>
            </el-table-column>

            <el-table-column label="操作" width="280" align="center">
                <template slot-scope="scope">
                    <el-button @click="editBoxOpen({type:'update',id:scope.row.id})">编辑</el-button>
                    <el-button @click="editBoxOpen({type:'copy',id:scope.row.id})">复制</el-button>
                    <el-popover placement="bottom-end" title="" trigger="click"
                        @show="showCode(scope.row.id)">
                        <ShareQrcodeBox :ref="'shareQrcodeBox'+scope.row.id" :appWindow="appWindow"></ShareQrcodeBox>
                        <el-button slot="reference" style="margin:0px 10px;">推广</el-button>
                    </el-popover>
                    <el-button type="danger" plain @click="mixinTable_selectTableDeleteData([scope.row])">删除</el-button>
                </template>
            </el-table-column>

        </el-table>

    </template>
    <!-- 表格选项 -->
    <template slot="options">
        <el-button :disabled="mixinTable_selectTableData.length<=0" @click="mixinTable_selectTableDeleteData()">
            删除已选</el-button>
        <el-button :disabled="mixinTable_selectTableData.length<=0"
            @click="mixinTable_clearSelectionChangeTableSmall()">取消选择
        </el-button>


        <el-popover placement="top" width="100" trigger="hover">
            <div>
                <el-button style="width:100%;margin-top: 5px;" :disabled="mixinTable_selectTableData.length<=0"
                    @click="handleClick(1)">批量修改品牌
                </el-button>
            </div>
            <div>
                <el-button style="width:100%;margin-top: 5px;" :disabled="mixinTable_selectTableData.length<=0"
                    @click="handleClick(2)">批量修改分组
                </el-button>
            </div>
            <div>
                <el-button style="width:100%;margin-top: 5px;" :disabled="mixinTable_selectTableData.length<=0"
                    @click="handleClick(3)">批量修改标签
                </el-button>
            </div>
            <div>
                <el-button style="width:100%;margin-top: 5px;" :disabled="mixinTable_selectTableData.length<=0"
                    @click="handleClick(4)">批量修改排序
                </el-button>
            </div>

            <div>
                <el-button style="width:100%;margin-top: 5px;" :disabled="mixinTable_selectTableData.length<=0"
                    @click="handleClick(5)">批量修改上下架状态
                </el-button>
            </div>
            <!-- <div v-for="(item,index) of assetTypeOptions" :key="index">
                    <el-button style="width:100%;margin-top:5px" :disabled="mixinTable_selectTableData.length<=0"
                        @click="select(item)">{{item.label}}</el-button>
                </div> -->
            <el-button style="margin:0px 10px" slot="reference" :disabled="mixinTable_selectTableData.length<=0">批量修改
            </el-button>
        </el-popover>


    </template>
    <!-- 分页 -->
    <template slot="page">
        <el-pagination class="paginationStyle" v-if="mixinTable_pageData.total>0" background
            @current-change="mixinTable_pagingData($event)" :current-page="mixinTable_pageData.pageNum"
            :page-size.sync="$vFN.Constants.pageSize" layout="total, prev, pager, next,jumper"
            :total.sync="mixinTable_pageData.total">
        </el-pagination>
    </template>
</LayoutTableSmall>